<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			/* 选择器   抓取页面上的元素  给页面上的元素添加效果【添加一个样式】  元素选择器*/
		div{
			/* 边框复合属性     生成一个像素实线橙色的边框 */
			border: 1px solid #ffaa00;
			width: 500px;
			height: 500px;
		}
		/* 需求：第二个div  边框颜色改成黑色 */
		/* id选择器   html元素前标记  加id=“别名”   抓到元素
		 class选择器 */
		#d2{
			border: 1px solid #000;
			background-color: #000;
			/* 子属性  border-style 边框样式属性 */
			border-style: dotted;
			/* 虚线  双实线 */
			border-style: dashed;
			border-style: double;
			/* 子属性：border-color  边框的颜色属性 */
			border-color: #ffaa00;
		}
		.d5{
			/* border边框属性【复合属性】：whdth style color */
			border: 30px solid #f00;
			/* 子属性：border-width边框的宽度属性 */
			/* 需求：第三个div 40像素 */
			border-width: 40px;
			/* 需求：上边框宽度20px 点线 */
			border-top: 20px dotted #f00;
			/* 需求：上边框加颜色 */
			border-top-color: aliceblue;
			/* 需求：下边框宽度调整为1px */
			border-bottom-width: 1px;
			/* 需求：左边框双实线效果 */
			border-left:double;
			/* 需求：右边框spx 虚线 绿色 */
			border-right:10px dashed #55ff00;
		
		}
		/*border-radius 边框倒角：边框或者背景颜色 
		画圆：宽高与倒角一致
		border-radius属性值  1个值 代表 上 右 下 左 【顺时针】
		                     2个值 代表 上 下 | 右 左【顺时针】
							 3个值 代表 上| 右 左 |下【顺时针】
							 4个值 代表 上 | 右 | 下 左【顺时针】
				练习  画图  4个颜色  鼠标悬停  旋转
				第三div  添加  悬停效果--伪类选择器  追加效果
				                         语法  任意选择器 hover 悬停效果  功能
		*/
		.d4{
          border: 10px solid #f00;
		  border-radius: 0px 200px 300px 400px;
		}
		.d7{height: 500px;
			border: 100px solid #90baff ;
			border-right-color: #bfbfbf;
			border-left-color:#ff55ff ;
			border-top-color: #ff5500;
			border-radius: 500px;
			width: 500px;
			/* 过度属性:给悬停效果增加过度时间 */
			transition: transform 10s;
		}
		/* 第三个div追加悬停效果 */
		.d7:hover{
			/* 效果：旋转 */
			/* 转换属性：属性值 */
			transform: rotate(36000000deg);
		}
		</style>
	</head>
	<body>
		<!-- div  有宽没高的空间
		 css边框的使用   选择器
		 -->
		<div></div>
		<div id="d2"></div>
		<div class="d3 d4 d5"></div>
		<div class="d7"></div class="d7">
	</body>
</html>